<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" width="50%" title="人员选择列表" @open="open">
    <el-row :gutter="5">
      <el-col :span="8">
        <!--部门数据-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>部门列表</span>
          </div>
          <el-tree :data="depts" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick"/>
        </el-card>
      </el-col>
      <el-col :span="16">
        <!--部门人员-->
        <el-transfer
          v-model="value"
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['部门人员', '已选人员']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :data="data"
          filterable
          style="text-align: left; display: inline-block"
        >
        </el-transfer>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { findDeptTree } from '@/api/framework/system/dept'
  import { findDeptUser } from '@/api/framework/system/user'
  import { expertTree } from '@/api/business/expert/expert'
  import { expertTreeUser } from '@/api/business/expert/expertlibrary'

  export default {
    name: 'UserSelect',
    props: {
      deptId: {
        type: String,
        required: true
      },
      mulCheck: {
        type: Number,
        required: true
      },
      roleFlag: {
        type: String,
        required: true
      },
      isExpert: {
        type: Number,
        required: false,
        default: 0
      }
    },
    data() {
      return {
        loading: false,
        dialog: false,
        value: [],
        depts: [],
        data: [],
        valueObj: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    methods: {
      open() {
        this.getDeptDatas()
      },
      doSubmit() {
        const len = this.value.length
        if (len === 0) {
          this.$message({
            showClose: true,
            message: '请选择,下一步任务处理人！',
            type: 'warning'
          })
        } else {
          if (this.mulCheck === 0 && len !== 1) {
            this.$message({
              showClose: true,
              message: '请选择,只能选择一位任务处理人！',
              type: 'warning'
            })
          } else {
            const selectUser = []
            this.value.map(item => {
              selectUser.push({
                name: this.valueObj[item],
                username: item
              })
            })
            this.$emit('flowUser', selectUser)
            this.dialog = false
          }
        }
      },
      handleNodeClick(data) {
        if (data.id === this.deptId || data.deptType === 'EXPERT') {
          this.getDeptUser(data)
        }
      },
      getDeptDatas() {
        if (this.isExpert === 1) {
          this.getExpertDeptTree()
        } else {
          this.getDefaultDeptTree()
        }
      },
      //添加了专家组的部门结构
      getExpertDeptTree() {
        expertTree(this.deptId).then(res => {
          this.depts = res.content
        })
      },
      //默认系统部门树
      getDefaultDeptTree() {
        findDeptTree(this.deptId).then(res => {
          this.depts = res.content
        })
      },

      //获取用户
      getDeptUser(data) {
        if (data.deptType === 'EXPERT') {
          this.getExpertDeptUser(data.id)
        } else {
          this.getDefaultDeptUser()
        }
      },
      //专家组用户查询
      getExpertDeptUser(expertGroupId) {
        expertTreeUser(expertGroupId).then(res => {
          this.data = res
          this.data.forEach(item => {
            this.valueObj[item.key] = item.label
          })
        })
      },
      //默认系统部门用户查询
      getDefaultDeptUser() {
        findDeptUser(this.deptId, this.roleFlag).then(res => {
          this.data = res
          this.data.forEach(item => {
            this.valueObj[item.key] = item.label
          })
        })
      },
      cancel() {
        this.dialog = false
      }
    }
  }
</script>
